<template>
    <dv-border-box-12 class="center">
        <div class="d-flex" style="margin-left:10px">
            <span>
                <span><i class="iconfont icon-align-left"></i></span>
            </span>
            <span class="fs-xl text mx-2 mt-1" style="font-size:19px;color: #eaedf3;">{{ title }}</span>
        </div>
        <!-- 数据表格 -->
        <dv-scroll-board class="dv-scr-board" :config="config" />
    </dv-border-box-12>
</template>

<script lang=ts>
import { defineComponent, reactive, watch, PropType } from "vue";

export default defineComponent({
    components: {},
    props: {
        title: {
            type: String,
            default: "",
        },
        // 接收科室名称用于筛选数据
        deptName: {
            type: String,
            required: true,
            default: ""
        },
        // 接收从index组件传递的全量统计数据
        fullStatistics: {
            type: Array as PropType<Array<{
                iiiDataType: string;
                number: string;
                lastWeekNum: string;
                deptName: string;
            }>>,
            default: () => []
        }
    },
    setup(props) {
        // 表格配置
        const config = reactive({
            header: ['序号', '业务指标', '数量', '上周同期'],
            data: [],
            rowNum: 5, // 表格行数
            headerHeight: 35,
            headerBGC: '#0f1325', // 表头背景色
            oddRowBGC: '#0f1325', // 奇数行背景色
            evenRowBGC: '#171c33', // 偶数行背景色
            index: false,
            columnWidth: [120, 120, 120, 120],
            align: ['center', 'center', 'center', 'center']
        });

        // 筛选当前科室的数据并格式化
        const updateTableData = () => {
            // 过滤出当前科室的数据
            const filtered = props.fullStatistics.filter(
                item => item.deptName === props.deptName && item.deptName !== ""
            );

            // 格式化数据为表格所需格式
            config.data = filtered.map((item, index) => [
                index + 1,
                item.iiiDataType || '',
                `<span>${item.number || 0}人</span>`,
                `<span>${item.lastWeekNum || 0}人</span>`
            ]);

            // 如果没有数据，显示提示信息
            if (config.data.length === 0) {
                config.data = [[1, '暂无数据', '', '']];
            }
        };

        // 监听props变化，实时更新数据
        watch([() => props.deptName, () => props.fullStatistics], updateTableData, {
            immediate: true // 初始化时立即执行
        });

        return {
            config
        };
    },
});
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 15px; /* 增加卡片底部间距，远离边框 */
  
  .d-flex {
    margin-top: 4%;
  }
  #bar-chart {
    font-size: 25px;
    width: 95%;
    height: 82%;
    margin: 0px auto;
  }
}

.body-box {
    border-radius: 10px;
    overflow: hidden;

    .dv-scr-board {
        width: 95%;
        height: 240px;
        margin-left: 15px;
        margin-top: 10px;
    }
}
</style>
    